<!--adminLogin-->
<template>
  <div>
    <el-row >
      <div class="login-head">
        <img class="logo" :src="logoImage" alt="" slot="error">
        <span style="font-size: 28px;margin-left: 10px">求职招聘管理系统</span>
      </div>
    </el-row>
    <el-col>
      <div class="login-container">
        <div class="login-box">
          <div style="font-weight: bold;font-size: 24px;text-align: center;margin-bottom: 30px;color: #1450aa">登 录</div>
          <el-form :model="data.form" ref="formRef" :rules="data.rules">
            <el-form-item prop="username">
              <el-input :prefix-icon="User" size="large" v-model="data.form.username" placeholder="请输入用户名"/>
            </el-form-item>
            <el-form-item prop="password">
              <el-input :prefix-icon="Lock" size="large" v-model="data.form.password" show-password placeholder="请输入密码"/>
            </el-form-item>

            <el-form-item prop="verificationcede">
              <el-input :prefix-icon="More" size="large" v-model="data.form.verificationcede" placeholder="请输入验证码"/>
            </el-form-item>
            <div style="margin-bottom: 10px">
              <Captcha/>
            </div>
            <el-form-item>
              <el-button size="large" type="primary" style="width: 100%" @click="login">登录</el-button>
            </el-form-item>
            <div style="text-align: right">没有账号？请<a href="/admin/register">注册</a></div>
          </el-form>
        </div>
      </div>
    </el-col>
  </div>
</template>

<script setup>
import {reactive, ref} from "vue";
import {Lock, More, User} from "@element-plus/icons-vue";
import logoImage from "@/assets/icons/mylogo.png";
import service from "@/utils/request";
import {ElMessage} from "element-plus";
import router from "@/router";
import Captcha from "@/components/Captcha.vue";


const data=reactive({
  form:{
    username:'',
    password:'',
    verificationcede:'',
  },

  rules:{
    username:[
      { required:true, message:'请输入账号', trigger:'blur'}
    ],
    password:[
      { required:true, message:'请输入密码', trigger:'blur'}
    ],
    verificationcede:[
      { required:true, message:'请输入验证码', trigger:'blur'}
    ],
  }
})
// const verifyCaptcha = (inputCaptcha) => {
//   //设置param
//   service.request({
//     url:'/verifyCaptcha'
//     ,method:'post',
//     params:{
//       inputCaptcha:inputCaptcha
//     }
//   })
//       .then(response => {
//         console.log("验证码验证成功！");
//       })
//       .catch(error => {
//         console.error("验证码验证失败", error);
//       });
// };
const formRef=ref()
//点击登录按钮会触发这个方法
const login=()=>{
  formRef.value.validate((valid=>{
    if(valid){
      //调用后台接口
      service.post('/user/login',data.form).then(res=>{
        ElMessage.success("登录成功")
        const user = res.data.data;
        // 将用户信息存储到localStorage
        localStorage.setItem('admin_user_name', user.username);
        localStorage.setItem('admin_user_id', user.id);
        localStorage.setItem('admin_user_avatar', user.avatar);
        console.log(user.token)
        // 根据实际情况，可能还需要存储token用于后续请求的认证
        if (user.token) {
          localStorage.setItem('admin_token', user.token);
        }
        router.push({name: 'JobManagement'});
      }).catch(error=>{
        ElMessage.error(error.msg)
      })
    }
  })).catch(error=>{
    console.error(error)
  })
}

</script>

<style scoped>

.login-container{
  height: 100vh ;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url("@/assets/images/fengjing4.webp");
  background-size: cover;
}
.login-head{
  height: 60px;
  width:  100%;
  padding: 2px 24px;
  background-color: rgba(255,255,255,.8);
  font-weight: bold;
  line-height: 60px;
  display: flex;
}
.login-box{
  width: 400px;
  padding: 80px 30px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgb(0,0,0,.1);
  background-color: rgba(255,255,255,.8);
}
</style>
